<template>
  <div class="ansible-audit-container">
    <!-- 星空背景 -->
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="audit-content">
      <!-- 页面标题 -->
      <div class="page-header glass-effect">
        <div class="header-content">
          <div class="title-section">
            <h1 class="page-title">
              <i class="fa fa-chart-line"></i>
              Docker容器监控
            </h1>
            <p class="page-subtitle">实时监控Docker容器资源使用情况</p>
          </div>
          <div class="stats-section">
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.running_containers || 0 }}</div>
              <div class="stat-label">运行容器</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.cpu_usage || '0%' }}</div>
              <div class="stat-label">CPU使用率</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.memory_usage || '0%' }}</div>
              <div class="stat-label">内存使用率</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="search-filters glass-effect">
        <el-form inline class="search-form">
          <el-form-item>
            <el-select v-model="selectedServer" placeholder="选择Docker服务器" class="server-select">
              <el-option
                v-for="server in dockerServers"
                :key="server.id"
                :label="server.name"
                :value="server.id"
              />
            </el-select>
            <el-button type="primary" @click="refreshMonitoring" class="glass-button refresh-button" :loading="loading">
              <i class="fa fa-refresh"></i>
              刷新监控
            </el-button>
            <el-button @click="exportReport" class="glass-button import-button">
              <i class="fa fa-download"></i>
              导出报告
            </el-button>
            <el-button @click="configureAlerts" class="glass-button sync-button">
              <i class="fa fa-bell"></i>
              配置告警
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 监控图表区域 -->
      <div class="monitoring-charts">
        <div class="chart-row">
          <div class="chart-card glass-effect">
            <div class="chart-title">
              <i class="fa fa-microchip"></i>
              CPU使用率
            </div>
            <div class="chart-container" id="cpuChart">
              <!-- CPU使用率图表 -->
              <div class="chart-placeholder">
                <i class="fa fa-chart-line"></i>
                <p>CPU使用率图表</p>
                <p class="chart-note">功能开发中...</p>
              </div>
            </div>
          </div>
          <div class="chart-card glass-effect">
            <div class="chart-title">
              <i class="fa fa-memory"></i>
              内存使用率
            </div>
            <div class="chart-container" id="memoryChart">
              <!-- 内存使用率图表 -->
              <div class="chart-placeholder">
                <i class="fa fa-chart-area"></i>
                <p>内存使用率图表</p>
                <p class="chart-note">功能开发中...</p>
              </div>
            </div>
          </div>
        </div>
        <div class="chart-row">
          <div class="chart-card glass-effect">
            <div class="chart-title">
              <i class="fa fa-network-wired"></i>
              网络I/O
            </div>
            <div class="chart-container" id="networkChart">
              <!-- 网络I/O图表 -->
              <div class="chart-placeholder">
                <i class="fa fa-chart-bar"></i>
                <p>网络I/O图表</p>
                <p class="chart-note">功能开发中...</p>
              </div>
            </div>
          </div>
          <div class="chart-card glass-effect">
            <div class="chart-title">
              <i class="fa fa-hdd"></i>
              磁盘I/O
            </div>
            <div class="chart-container" id="diskChart">
              <!-- 磁盘I/O图表 -->
              <div class="chart-placeholder">
                <i class="fa fa-chart-pie"></i>
                <p>磁盘I/O图表</p>
                <p class="chart-note">功能开发中...</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 容器监控列表 -->
      <div class="audit-table-section glass-effect">
        <div class="section-title">
          <i class="fa fa-cube"></i>
          容器资源监控
        </div>

        <el-table
          :data="containerMetrics"
          style="width: 100%"
          v-loading="loading"
          row-class-name="audit-row"
          class="audit-table"
        >
          <el-table-column prop="name" label="容器名称" min-width="150">
            <template #default="scope">
              <div class="config-name">
                <i class="fa fa-cube"></i>
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="cpu_percent" label="CPU使用率" width="120">
            <template #default="scope">
              <el-progress
                :percentage="scope.row.cpu_percent || 0"
                :color="getProgressColor(scope.row.cpu_percent)"
                :stroke-width="8"
                text-inside
              />
            </template>
          </el-table-column>

          <el-table-column prop="memory_percent" label="内存使用率" width="120">
            <template #default="scope">
              <el-progress
                :percentage="scope.row.memory_percent || 0"
                :color="getProgressColor(scope.row.memory_percent)"
                :stroke-width="8"
                text-inside
              />
            </template>
          </el-table-column>

          <el-table-column prop="memory_usage" label="内存使用" width="120">
            <template #default="scope">
              <span class="metric-text">
                {{ formatBytes(scope.row.memory_usage) }}
              </span>
            </template>
          </el-table-column>

          <el-table-column prop="network_io" label="网络I/O" width="150">
            <template #default="scope">
              <div class="io-metrics">
                <div class="io-item">
                  <span class="io-label">↑</span>
                  <span class="io-value">{{ formatBytes(scope.row.network_tx) }}</span>
                </div>
                <div class="io-item">
                  <span class="io-label">↓</span>
                  <span class="io-value">{{ formatBytes(scope.row.network_rx) }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="disk_io" label="磁盘I/O" width="150">
            <template #default="scope">
              <div class="io-metrics">
                <div class="io-item">
                  <span class="io-label">R</span>
                  <span class="io-value">{{ formatBytes(scope.row.disk_read) }}</span>
                </div>
                <div class="io-item">
                  <span class="io-label">W</span>
                  <span class="io-value">{{ formatBytes(scope.row.disk_write) }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="uptime" label="运行时间" width="120">
            <template #default="scope">
              <span class="time-text">
                {{ formatUptime(scope.row.uptime) }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button
                  @click="viewDetails(scope.row)"
                  size="small"
                  class="glass-button import-button"
                >
                  <i class="fa fa-search"></i>
                  详情
                </el-button>
                <el-button
                  @click="viewLogs(scope.row)"
                  size="small"
                  class="glass-button sync-button"
                >
                  <i class="fa fa-file-text"></i>
                  日志
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'

// 响应式数据
const loading = ref(false)
const selectedServer = ref('')

// 统计数据
const statistics = reactive({
  running_containers: 0,
  cpu_usage: '0%',
  memory_usage: '0%'
})

// 数据列表
const dockerServers = ref([])
const containerMetrics = ref([])

// 页面加载
onMounted(() => {
  loadData()
})

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    await Promise.all([
      loadDockerServers(),
      loadContainerMetrics(),
      loadStatistics()
    ])
  } catch (error) {
    console.error('加载数据失败:', error)
    ElMessage.error('加载数据失败')
  } finally {
    loading.value = false
  }
}

// 加载Docker服务器列表
const loadDockerServers = async () => {
  try {
    // TODO: 实现API调用
    dockerServers.value = []
  } catch (error) {
    console.error('加载Docker服务器失败:', error)
  }
}

// 加载容器监控数据
const loadContainerMetrics = async () => {
  try {
    // TODO: 实现API调用
    containerMetrics.value = []
  } catch (error) {
    console.error('加载容器监控数据失败:', error)
  }
}

// 加载统计数据
const loadStatistics = async () => {
  try {
    // TODO: 实现API调用
    Object.assign(statistics, {
      running_containers: 0,
      cpu_usage: '0%',
      memory_usage: '0%'
    })
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

// 刷新监控数据
const refreshMonitoring = () => {
  loadData()
  ElMessage.success('监控数据已刷新')
}

// 监控操作
const exportReport = () => {
  ElMessage.info('导出监控报告功能开发中...')
}

const configureAlerts = () => {
  ElMessage.info('配置告警功能开发中...')
}

const viewDetails = (container: any) => {
  ElMessage.info(`查看容器 ${container.name} 详细监控数据功能开发中...`)
}

const viewLogs = (container: any) => {
  ElMessage.info(`查看容器 ${container.name} 日志功能开发中...`)
}

// 工具函数
const getProgressColor = (percentage: number) => {
  if (percentage >= 80) return '#ef4444'
  if (percentage >= 60) return '#f59e0b'
  return '#22c55e'
}

const formatBytes = (bytes: number) => {
  if (!bytes) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let index = 0
  while (bytes >= 1024 && index < units.length - 1) {
    bytes /= 1024
    index++
  }
  return `${bytes.toFixed(1)} ${units[index]}`
}

const formatUptime = (seconds: number) => {
  if (!seconds) return '0s'
  const days = Math.floor(seconds / 86400)
  const hours = Math.floor((seconds % 86400) / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)

  if (days > 0) return `${days}d ${hours}h`
  if (hours > 0) return `${hours}h ${minutes}m`
  return `${minutes}m`
}
</script>

<style scoped>
/* 使用与Zabbix服务器配置页面完全相同的样式 */
.ansible-audit-container {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  overflow-x: hidden;
}

.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: zoom 20s infinite linear;
}

.stars2 {
  background-image:
    radial-gradient(1px 1px at 40px 60px, #fff, transparent),
    radial-gradient(1px 1px at 120px 10px, rgba(255,255,255,0.7), transparent);
  background-repeat: repeat;
  background-size: 300px 200px;
  animation: zoom 40s infinite linear;
}

.stars3 {
  background-image:
    radial-gradient(1px 1px at 10px 10px, rgba(255,255,255,0.5), transparent);
  background-repeat: repeat;
  background-size: 400px 300px;
  animation: zoom 60s infinite linear;
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

.audit-content {
  position: relative;
  z-index: 10;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.glass-effect {
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.page-header {
  margin-bottom: 30px;
  padding: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.title-section h1 {
  color: rgba(255, 255, 255, 0.95);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.title-section h1 i {
  color: #a4f4ba;
  margin-right: 12px;
}

.page-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 0;
}

.stats-section {
  display: flex;
  gap: 20px;
}

.stat-card {
  padding: 20px;
  text-align: center;
  min-width: 120px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #a4f4ba;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-filters {
  margin-bottom: 30px;
  padding: 20px;
}

.search-form {
  margin: 0;
}

.audit-table-section {
  padding: 30px;
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title i {
  color: #a4f4ba;
}

.config-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.config-name i {
  color: #00eaff;
}

.time-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.monitoring-charts {
  margin-bottom: 30px;
}

.chart-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  flex: 1;
  padding: 20px;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-title i {
  color: #a4f4ba;
}

.chart-container {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.chart-placeholder i {
  font-size: 48px;
  color: #a4f4ba;
  margin-bottom: 10px;
}

.chart-placeholder p {
  margin: 5px 0;
}

.chart-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.metric-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-family: monospace;
}

.io-metrics {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.io-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.io-label {
  color: #a4f4ba;
  font-weight: bold;
  font-size: 12px;
  width: 12px;
}

.io-value {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-family: monospace;
}

.server-select {
  width: 200px;
  margin-right: 10px;
}

/* 工具栏按钮样式 - 完全照抄Zabbix服务器配置页面 */
.glass-button {
  background: rgba(164, 244, 186, 0.15) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

  &:hover {
    background: rgba(164, 244, 186, 0.25) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(164, 244, 186, 0.2) !important;
  }

  i {
    margin-right: 6px !important;
    color: #00eaff !important;
  }

  &.refresh-button {
    background: rgba(138, 43, 226, 0.2) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(138, 43, 226, 0.3) !important;
      border-color: rgba(138, 43, 226, 0.6) !important;
      box-shadow: 0 4px 16px rgba(138, 43, 226, 0.3) !important;
    }

    i {
      color: #8a2be2 !important;
    }
  }

  &.sync-button {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(59, 130, 246, 0.3) !important;
      border-color: rgba(59, 130, 246, 0.6) !important;
      box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3) !important;
    }

    i {
      color: #3b82f6 !important;
    }
  }

  &.import-button {
    background: rgba(6, 182, 212, 0.2) !important;
    border-color: rgba(6, 182, 212, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(6, 182, 212, 0.3) !important;
      border-color: rgba(6, 182, 212, 0.6) !important;
      box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3) !important;
    }

    i {
      color: #06b6d4 !important;
    }
  }
}

/* 表格样式 */
:deep(.audit-table) {
  background: transparent !important;

  .el-table__header {
    background: rgba(164, 244, 186, 0.1) !important;
  }

  .el-table__header th {
    background: transparent !important;
    border-bottom: 1px solid rgba(164, 244, 186, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
  }

  .el-table__body tr {
    background: transparent !important;

    &:hover {
      background: rgba(164, 244, 186, 0.05) !important;
    }
  }

  .el-table__body td {
    border-bottom: 1px solid rgba(164, 244, 186, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }
}

.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

.action-buttons .glass-button {
  padding: 8px 16px !important;
  font-size: 12px;
  white-space: nowrap;
  width: auto !important;
}
</style>
